<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd(){
            var tr=document.createElement("tr");//创建tr元素
            var td=document.createElement("td");//创建td元素
            td.colSpan="5";//严格区分大小写的
            td.innerHTML="我是一个跨5列的行";
            td.align="center";
            tr.appendChild(td);//将td添加到tr中去

            // node.insertBefore(newNode,refNode)   父节点.insertBefore(新节点,已存在的节点)在已存在的节点的前面添加新节点
            var tb=document.getElementById("tb");//找到tr的父元素
            var trs=tb.getElementsByTagName("tr");//在tbody中查找所有的tr元素的集合
            tb.insertBefore(tr,trs[2]);//指定在以前的第三行的前面添加一行


        }

        function doDelete(){
            var tb=document.getElementById("tb");//找到tr的父元素
            var trs=tb.getElementsByTagName("tr");//在tbody中查找所有的tr元素的集合
            // node.removeChild(refNode)  父节点.removeChild(要删除的节点);
            // tb.removeChild(trs[2]);


            // node.remove()  节点.remove() 
            trs[2].remove();

        }

        function doReplace(){
            // node.replaceChild(newNode,refNode)  父节点.replaceChild(新的节点,已经存在的节点)

            var tr=document.createElement("tr");//创建tr元素
            var td=document.createElement("td");//创建td元素
            td.colSpan="5";//严格区分大小写的
            td.innerHTML="我是一个替换的行";
            td.align="center";
            tr.appendChild(td);//将td添加到tr中去
            var tb=document.getElementById("tb");//找到tr的父元素
            var trs=tb.getElementsByTagName("tr");//在tbody中查找所有的tr元素的集合
            tb.replaceChild(tr,trs[2]);

        }

        function doClone(){
            var tb=document.getElementById("tb");//找到tr的父元素
            var trs=tb.getElementsByTagName("tr");//在tbody中查找所有的tr元素的集合
            var tr=trs[2].cloneNode(true);//true表示克隆当前元素以及内部的元素，如果是false只克隆当前元素，不包含子元素
            tb.appendChild(tr);
        }
    </script>
</head>
<body>
    <input type="button" value="添加一行" onclick="doAdd()">
    <input type="button" value="删除一行" onclick="doDelete()">
    <input type="button" value="替换一行" onclick="doReplace()">
    <input type="button" value="克隆一行" onclick="doClone()">
    <!-- table>(thead>tr>th{th$$}*5)+tbody>(tr>td{td$$}*5)*6 -->
    <table border="1" width="600">
        <thead>
            <tr>
                <th>th01</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
                <th>th05</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
        </tbody>
    </table>
</body>
</html>